window.onload = function () {
    //配置
    var config = {
        vx: 4,//点x轴速度,正为右，负为左
        vy: 4,//点y轴速度
        height: 2,//点高宽，其实为正方形，所以不宜太大
        width: 2,
        count: 30,//点个数
        color: "#c3c3c3",//点颜色
        stroke: "#ececec",//线条颜色
        dist: 6000,//点吸附距离
        e_dist: 20000,//鼠标吸附加速距离
        max_conn: 10//点到点最大连接数
    }
    //调用
    CanvasParticle(config);

    

    // 遍历数据
    let apiData = [
        { "times": 4000, "price": '￥1200', "unitPrice": "0.3000" },
        { "times": 8000, "price": '￥2000', "unitPrice": "0.2500" },
        { "times": 40000, "price": '￥8000', "unitPrice": "0.2000" }
    ];

    let apiSelect = getEle('#api-select');
    
    // 渲染api-selct中的html页面
    apiData.forEach(function(v,i){
        // 创建节点
        let apiLi = document.createElement('li');

        // 判定   默认选中
        if(i == 0){
            apiLi.className = 'utils select' ;
        }else{
            apiLi.className = 'utils';
        }
        
        // 将节点追加到父元素，渲染到页面
        apiLi.innerText = v.times + '/次';
        apiSelect.appendChild(apiLi);
    })

    let priceBox = getEle('#priceBox');
    let timeBox = getEle('#timeBox');

    let liDom = getEleAll('#api-select .utils');
    liDom.forEach(function(v,i){
        v.addEventListener('click',function(){
            // 点击时样式改变
            liDom.forEach(function(vv){
                vv.classList.remove('select');
            })
            v.classList.add('select');

            timeBox.innerText = apiData[i].unitPrice;
            priceBox.innerText = apiData[i].price;
            
        })
    })

    // tab栏切换
    let navs = getEleAll('#remind li');
    console.log(navs);
    let boxs = getEleAll('.con-left');
    // console.log(box);
    navs.forEach(function(v,i){
        v.addEventListener('click',function(){
            boxs.forEach(function(vv){
                vv.classList.remove('on');
            })
            boxs[i].classList.add('on');
            navs.forEach(function(v){
                v.classList.remove('checked');
            })
            v.classList.add('checked');
        })
    })


}